CSS [attribute~=”value”] Selector
The [attribute~=”value”] Selector selector is used to select all the elements whose attribute value is a list of space-separated values, one of which is exactly equal to the specified value.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Attribute selector</title>
<style>
[class~="gfg"] {
color: green;
font-size: 40px;
font-weight: bold;
text-align: center;
}
[class~="geeks"] {
font-size: 17px;
text-align: center;
margin-top: 0px;
}
</style>
</head>
<body>
<div class="gfg">w3wiki</div>
<div Class="geeks">A computer science portal for geeks
</div>
<div class="geeks ide">
w3wiki is coding platform
</div>
</body>
</html>
Output:
CSS Attribute Selector
The CSS Attribute Selector is a very useful approach that targets elements based on their specific attributes or attribute values. This allows for precise styling of HTML elements that share common attributes, enhancing the consistency and efficiency of your CSS code. Lets see how to work with CSS Attribute Selector.
Syntax:
[attribute]{
/* Styles*/
}
// OR
element [attribute] {
/* Styles*/
}
// OR
[attribute ="value "]
{
/* Styles*/
}
There are several types of attribute selectors which are discussed below: